import {ElLoading, ElMessage, ElMessageBox} from "element-plus";
import Pedometer from "../commons/pedometer";

/**
 * 成功弹窗
 *
 * @param txt       文本
 * @param timeout   延迟时间
 * @returns void
 */
const succeed = (txt: string = '操作成功！', timeout: number = 3000): void => {
    ElMessage({
        message: txt,
        type: 'success',
        showClose: true,
        duration: timeout
    });
}

/**
 * 消息弹窗
 *
 * @param txt       文本
 * @param timeout   延迟时间
 * @returns void
 */
const msg = (txt: string, timeout: number = 3000): void => {
    return info(txt, timeout);
}

/**
 * 消息弹窗
 *
 * @param txt       文本
 * @param timeout   延迟时间
 * @returns void
 */
const info = (txt: string, timeout: number = 3000): void => {
    ElMessage({
        message: txt,
        type: 'info',
        showClose: true,
        duration: timeout
    });
}

/**
 * 警告弹窗
 *
 * @param txt       文本
 * @param timeout   延迟时间
 * @returns void
 */
const warn = (txt: string, timeout: number = 3000): void => {
    ElMessage({
        message: txt,
        type: 'warning',
        showClose: true,
        duration: timeout
    });
}

/**
 * 错误弹窗
 *
 * @param txt       文本
 * @param timeout   延迟时间
 * @returns void
 */
const error = (txt: string, timeout: number = 5000): void => {
    ElMessage({
        message: txt || '操作失败！',
        type: 'error',
        showClose: true,
        duration: timeout
    });
}

/**
 * 失败弹窗
 *
 * @param txt       文本
 * @param timeout   延迟时间
 * @returns void
 */
const failed = (txt: string, timeout: number = 5000): void => {
    error(txt, timeout);
}

/**
 * 加载条
 *
 * @param txt       文本
 */
const loading = (txt = 'Loading...') => {
    return ElLoading.service({
        text: txt,
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
    })
};

/**
 * 全局单一滚动条
 *
 * 一些 ajax 请求，需要展开一个遮罩层，避免用户操作到正在处理的数据，
 * 如果有多个 ajax，会产生重复打开加载条的问题；
 * 这个加载条解决了这个问题。
 */
const pedometer: Pedometer = new Pedometer()
    .onStarted(() => {
        // 启动载入条
        return ElLoading.service({
            text: 'Loading...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
        })
    })
    .onFinished((loader) => {
        // 关闭载入条
        loader.close();
    });


/**
 * 全局加载条，可以重复调用，打开几次，就要关闭几次
 *
 * @returns void
 */
const startLoading = () => {
    pedometer.run();
};

/**
 * 全局加载条
 *
 * @returns void
 */
const closeLoading = () => {
    pedometer.close();
};

/**
 * 消息弹窗
 *
 * @param title {string}        标题
 * @param html {string}         一般用上面几种弹窗即可，这个弹窗允许包含html脚本，需要注意避免XSS攻击
 * @returns {Promise<*>}
 */
const alert = (title, html) => {
    return ElMessageBox.alert(html, title);
};

/**
 * 消息弹窗
 *
 *
 * 一般用上面几种弹窗即可，这个弹窗允许包含 html 脚本，需要注意避免 XSS 攻击
 *
 * @param title {string}        标题
 * @param html {string} - html 脚本
 * @returns {Promise<*>}
 */
const alertHtml = (title, html) => {
    return ElMessageBox.alert(html, title, {dangerouslyUseHTMLString: true});
};


/**
 * 消息弹窗
 *
 * @param title {string}        标题
 * @param msg {string}          小标题
 * @returns {Promise<*>}
 */
const prompt = (title, msg) => {
    return ElMessageBox.prompt(msg, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
    });
};

/**
 * 确认弹窗
 *
 * @param txt {string}      文本
 * @returns {Promise<*>}
 */
const confirm = (txt) => {
    return ElMessageBox.confirm(txt, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        customClass: 'confirm'
    });
};


/**
 * 各类弹窗设计
 *
 * 业务中不直接使用原生的弹窗，统一使用 Layers 操作，方便统一风格
 * ========================================================================
 */
export default {
    // some useful message-box
    succeed, msg, info, warn, error, failed, loading

    // countdown - loader
    , startLoading, closeLoading, pedometer

    // alert
    , alert, prompt, confirm, alertHtml
}